<!--
  Dynamic table template
-->
<hz-magic-search-context filter-facets="filterFacets">
  <hz-magic-search-bar ng-if="filterFacets">
  </hz-magic-search-bar>
  <actions ng-if="filterFacets && batchActions" allowed="batchActions" type="batch" result-handler="resultHandler"></actions>
  <table
    hz-table ng-cloak
    st-magic-search
    st-table="items"
    st-safe-src="safeSrcItems"
    default-sort="name"
    default-sort-reverse="false"
    class="table table-striped table-rsp table-detail">
    <thead>
      <!--
        Table-column-headers:
        Set selectAll to True if you want to enable select all checkbox.
        Set expand to True if you want to inline details.
      -->
      <tr>
        <th ng-show="config.selectAll" class="multi_select_column">
          <input type="checkbox" hz-select-all="items">
        </th>
        <th ng-show="config.expand" class="expander"></th>
        <th ng-repeat="column in config.columns"
          class="rsp-p{$ column.priority $}"
          st-sort="{$ column.id $}"
          ng-attr-st-sort-default="{$ column.sortDefault $}"
          translate>
          {$ column.title $}
        </th>
      </tr>
    </thead>

    <tbody>
      <!--
        Table-rows:
        classes rsp-p1 rsp-p2 are responsive priority as user resizes window.
      -->
      <tr ng-repeat-start="item in items track by item[config.trackId]"
          ng-class="{'st-selected': checked[item[config.trackId]]}">

        <td ng-show="config.selectAll" class="multi_select_column">
          <input type="checkbox"
            ng-model="tCtrl.selections[item[config.trackId]].checked"
            hz-select="item">
        </td>
        <td ng-show="config.expand" class="expander">
          <span class="fa fa-chevron-right"
            hz-expand-detail
            duration="200">
          </span>
        </td>
        <td ng-repeat="column in config.columns"
          class="rsp-p{$ column.priority $}">
          <hz-cell></hz-cell>
        </td>
        <td class="action_column">
          <!--
            Table-row-action-column:
            Actions taken here apply to a single item/row.
          -->
          <actions ng-if="itemActions" allowed="itemActions" type="row" item="item" result-handler="resultHandler"></actions>
        </td>
      </tr>

      <!--
        Detail-row:
        Contains detailed information on this item.
        Can be toggled using the chevron button.
        Ensure colspan is greater or equal to number of column-headers.
      -->
      <tr ng-if="config.expand" ng-repeat-end class="detail-row">
        <td class="detail" colspan="100">
          <hz-detail-row template-url="config.detailsTemplateUrl">
          </hz-detail-row>
        </td>
      </tr>
      <tr hz-no-items items="items"></tr>
    </tbody>

    <!--
      Table-footer:
      This is where we display number of items and pagination controls.
    -->
    <tfoot hz-table-footer items="items"></tfoot>
  </table>
</hz-magic-search-context>
